<template>
  <div class="box">
    <van-nav-bar
      title="个人信息"
      right-text="保存"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="upload_photo">
      <van-uploader :after-read="afterRead" max-count="1" preview-size="0.75rem" :deletable="false">
        <van-image round width="0.75rem" height="0.75rem" :src="avatar" />
      </van-uploader>
    </div>
    <div class="upload_msg">
      <van-field v-model="text_userID" label="用户ID" readonly />
      <van-field v-model="text_userName" label="昵称" placeholder="请输入您的昵称" />
      <van-field v-model="text_userMail" label="邮箱" placeholder="请输入您的邮箱" />
      <div class="sex">
        <span>性别</span>
        <van-radio-group @change="setSex(sex)" v-model="sex" direction="horizontal" class="radio">
          <van-radio name="1">男</van-radio>
          <van-radio name="0">女</van-radio>
        </van-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Toast, Uploader, Field, Cell, CellGroup, RadioGroup, Radio, Dialog, Image } from 'vant'
import { getUserInfo, updateInfo, updateAvatar } from '@/api'
Vue.use(NavBar)
Vue.use(Toast)
Vue.use(Uploader)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(Field)
Vue.use(Dialog)
Vue.use(Image)
export default {
  data () {
    return {
      avatar: 'https://m.juooo.com/static/img/logo-user.8413cbf.png',
      text_userID: '',
      text_userName: '',
      text_userMail: '',
      sex: localStorage.getItem('sex')
    }
  },
  mounted () {
    getUserInfo({
      userid: localStorage.getItem('userid'),
      token: localStorage.getItem('token')
    }).then(res => {
      if (res.data.message === 'token验证失败') {
        Toast('您登录的用户信息已过期,请重新登录')
        localStorage.clear()
        setTimeout(() => {
          this.$router.replace('/login')
        }, 1000)
      } else {
        this.text_userID = res.data.data[0].tel
        this.avatar = res.data.data[0].avatar
        if (res.data.data[0].nickname !== '请设置昵称') {
          // this.sex = res.data.data[0].sex
          this.text_userName = res.data.data[0].nickname
          this.text_userMail = res.data.data[0].email
        }
      }
    })
  },
  methods: {
    onClickLeft () {
      Dialog.confirm({
        message: '你当前的资料尚未保存,确认返回?'
      }).then(() => {
        this.$router.go(-1)
      }).catch(() => {
        // on cancel
      })
    },
    onClickRight () {
      if (this.text_userName !== '' && this.text_userMail !== '' && this.sex !== '') {
        updateInfo({
          userid: localStorage.getItem('userid'),
          token: localStorage.getItem('token'),
          nickname: this.text_userName,
          email: this.text_userMail,
          sex: this.sex
        }).then(res => {
          if (res.data.message === 'token验证失败') {
            Toast('您登录的用户信息已过期,请重新登录')
            localStorage.clear()
            setTimeout(() => {
              this.$router.replace('/login')
            }, 1000)
          } else {
            localStorage.setItem('nickname', this.text_userName)
            localStorage.setItem('sex', this.sex)
            this.$router.replace('/user')
          }
        })
      } else {
        Toast('请填写完整的信息')
      }
    },
    afterRead (file) {
      // console.log(file)
      updateAvatar({
        userid: localStorage.getItem('userid'),
        token: localStorage.getItem('token'),
        avatar: file.content
      }).then(res => {
        if (res.data.message === 'token验证失败') {
          Toast('您登录的用户信息已过期,请重新登录')
          localStorage.clear()
          setTimeout(() => {
            this.$router.replace('/login')
          }, 1000)
        } else {
          this.avatar = file.content
        }
      })
    },
    setSex (name) {
      // console.log(name)
    }
  }
}
</script>

<style lang="scss" scoped>
.upload_photo {
  width: 100%;
  height: 1.37rem;
  text-align: center;
  box-sizing: border-box;
  padding: 0.25rem 0;
  border-bottom: 0.12rem solid #F5F5F5;
}
.upload_msg {
  .sex {
    width: 100%;
    height: 0.6rem;
    box-sizing: border-box;
    padding: 0.1rem 0.15rem;
    line-height: 0.4rem;
    span {
      float: left;
      width: 0.9rem;
      height: 0.4rem;
    }
    .radio {
      float: left;
      margin: 0.1rem 0;
    }
  }
}
/deep/ .van-icon-arrow-left {
  font-size: 0.2rem;
  color: #666666;
}
/deep/ .van-nav-bar__text {
  color: #666666;
  font-size: 0.12rem;
}
/deep/ .van-hairline--bottom {
  border-bottom: 1px solid #EBEBEB;
}
/deep/ .van-uploader__preview-image {
  border-radius: 50%;
  border: 1px solid #eeeeee;
}
/deep/ .van-uploader__upload {
  border-radius: 50%;
}
/deep/ .van-field {
  line-height: 0.4rem;
}
</style>
